import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, theme, Image  } from 'antd';
import React from 'react';


const Welcome: React.FC = () => {
  const { token } = theme.useToken();
  const { initialState } = useModel('@@initialState');
  console.log('initialState', initialState.currentUser.avatarUrl);
  const images = [
    initialState?.currentUser?.avatarUrl
  ];
  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8,
        }}
        bodyStyle={{
          backgroundImage:
            initialState?.settings?.navTheme === 'realDark'
              ? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
              : 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
        }}
      >
        <div
          style={{
            backgroundPosition: '100% -30%',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '274px auto',
            backgroundImage:
              "url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')",
          }}
        >
          <div  style={{
            fontSize: '20px',
            color: token.colorTextHeading,
          }}
          >
            欢迎使用 用户权限管理系统
          </div>
          <p
            style={{
              fontSize: '14px',
              color: token.colorTextSecondary,
              lineHeight: '22px',
              marginTop: 16,
              marginBottom: 32,
              width: '65%',
            }}
          >
            这是一个练手项目，主要目的是为了熟悉 umi + ant design 的使用。以及项目的上线方式~
          </p>
        </div>
          <Image.PreviewGroup>
            {images.map(src => <Image width={400} height={500} src={src} key={src} style={{marginRight: 16, marginBottom: 16}}/>)}
          </Image.PreviewGroup>
      </Card>
    </PageContainer>
  );
};

export default Welcome;
